/*
 * 活动修改
 * @Author: zfx
 * @Date: 2018-07-24 9:16:27
 */
<template>
	<div class="v-customer-activity-edit">
		<Row
			type="flex"
			justify="start">

			<i-col push="1">
				<Form
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="110"
					name="edit-form">

					<Form-item
						:label="$t('activity.name')"
						prop="name">
						<i-input
							v-model="formValidate.name"
							:placeholder="$t('activity.please_enter_the_activity_name')"
							name="edit-name"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('activity.url')"
						prop="url">
						<i-input
							v-model="formValidate.url"
							:placeholder="$t('activity.please_enter_the_address_of_the_activity')"
							name="edit-url"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('activity.photo')"
						prop="thumb">
						<Uploader
							ref="uploader"
							:default.sync="thumb_url"
							@on-remove="handleRemove"
							@on-change="handleChange">
							{{ $t('activity.image_format') }}
						</Uploader>
					</Form-item>

					<Form-item
						:label="$t('activity.start_time')"
						prop="started_time">
						<DatePicker
							v-model="formValidate.started_time"
							:placeholder="$t('activity.please_select_StartDate')"
							type="datetime"
							format="yyyy-MM-dd HH:mm:ss"
							name="edit-started_time"
							@on-change="changeStartedDate"/>
					</Form-item>

					<Form-item
						:label="$t('activity.end_time')"
						prop="ended_time">
						<DatePicker
							v-model="formValidate.ended_time"
							:placeholder="$t('activity.please_select_EndDate')"
							type="datetime"
							format="yyyy-MM-dd HH:mm:ss"
							name="edit-ended_time"
							@on-change="changeEndDate"/>
					</Form-item>

					<Form-item>
						<Button
							type="primary"
							@click="handleSubmit('formValidate')">
							{{ $t('common.update') }}
						</Button>
					</Form-item>
				</Form>
			</i-col>

		</Row>
	</div>
</template>

<script>
import Uploader from 'src/views/component/Uploader';

export default {

	name: 'ActivityEdit',
	components: {
		Uploader,
	},
	props: {
		activityDetail: {
			type: Object,
			default() {
				return {};
			},
		},
	},

	data() {
		return {
			formValidate: {
				name: '', // 活动名称
				thumb: '', // 活动图片
				url: '', // 活动首页地址
				started_time: '', // 开始日期
				ended_time: '', // 结束日期
			}, // 更新活动时的表单

			real_StartDate: '', // 格式化后的开始时间

			real_EndDate: '', // 格式化后的结束时间

			ruleValidate: { // 表单验证规则
				name: [
					{
						message: this.$t('validate.required', { field: this.$t('activity.name') }),
						trigger: 'blur,change',
					},
				],
				url: [
					{
						message: this.$t('validate.required', { field: this.$t('activity.url') }),
						trigger: 'blur,change',
					},
				],
				started_time: [
					{
						type: 'date',
						message: this.$t('validate.required', { field: this.$t('activity.start_time') }),
						trigger: 'blur,change',
					},
				],
				ended_time: [
					{
						type: 'date',
						message: this.$t('validate.required', { field: this.$t('activity.end_time') }),
						trigger: 'blur,change',
					},
				],
			},

			thumb_url: '', // 默认显示预览图

		};
	},

	created() {
		this.initFormData();
	},

	methods: {
		initFormData() {
			if (this.activityDetail && Object.keys(this.activityDetail).length > 0) {
				this.formValidate.banner_type_id = String(this.activityDetail.id);
				this.formValidate.name = this.activityDetail.name;
				this.formValidate.url = this.activityDetail.activity_url;
				// 获取活动时间
				this.formValidate.started_time = this.activityDetail.started_at;
				this.formValidate.ended_time = this.activityDetail.ended_at;
				this.real_StartDate = this.activityDetail.started_at;
				this.real_EndDate = this.activityDetail.ended_at;
				// 获取活动图片
				this.formValidate.thumb = this.activityDetail.activity_picture;
				this.thumb_url = this.activityDetail.activity_picture;
			}
		},

		/**
		 * 删除图片
		 * @return {undefined}
		 */
		handleRemove() {
			this.formValidate.thumb = null;
			// this.$refs.formValidate.validateField('thumb');
		},

		/**
		 * 选择图片
		 * @param {Object} file {选择的文件对象集合}
		 * @return {undefined}
		 */
		handleChange({ file }) {
			this.formValidate.thumb = file;
			// this.$refs.formValidate.validateField('thumb');
		},

		/**
         * 开始时间选择器改变的回调
         * @param  {string} date {格式化后的时间}
         * @return {undefined}
         */
		changeStartedDate(date) {
			this.real_StartDate = date;
		},

		/**
         * 结束时间选择器改变的回调
         * @param  {string} date {格式化后的时间}
         * @return {undefined}
         */
		changeEndDate(date) {
			this.real_EndDate = date;
		},

		/**
         * 更新活动信息
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.formDataEdit();
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 重置表单
         * @param  {string} name {表单上对应的ref值}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();
		},

		/**
         * 手动拼接表单数据
         * @return {Object} {拼接好的表单数据}
         */
		formDataEdit() {
			const new_object = {
				_method: 'PUT',

				name: this.formValidate.name,
				activity_url: this.formValidate.url,
				activity_picture: this.formValidate.thumb,
				started_at: this.real_StartDate,
				ended_at: this.real_EndDate,

			};

			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				form_data.append(key, new_object[key]);
			});

			this.$emit('update', this.activityDetail.id, form_data);
		},

	},
};
</script>
